<template>
  <el-dialog
    title="投诉"
    :visible.sync="innerVisible"
    width="60%"
    center
    >
    <div class="row">
      <div class="col-xs-12">
        <el-form :model="model"  ref="elForm" label-width="100px">
          <el-form-item label="投诉分类" prop="complainCauseCode" :rules="[
            {required: true, message: '投诉分类', trigger: 'change'}
          ]">
            <el-select v-model="model.complainCauseCode" placeholder="投诉分类">
              <el-option v-for="item in typeArr" :label="item.text" :key="item.value" :value="item.value"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="投诉说明" prop="complainMemo">
            <el-input type="textarea" :maxlength="300" :rows="3" v-model="model.complainMemo" placeholder="投诉说明"></el-input>
          </el-form-item>

          <el-form-item label="投诉照片" prop="complainPicture">
            <uploadImage v-model="model.complainPicture" :formData="{group: '1'}"></uploadImage>
          </el-form-item>

        </el-form>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="innerVisible = false">取 消</el-button>
      <el-button :loading="loading" type="primary" @click="submit">提交</el-button>
    </span>
  </el-dialog>

</template>
<script>
import {copy, dotData, confirm} from '@/utils'
import {getCOMPLAINCAUSE} from '@/utils/selectOptions'
export default {
  components: {
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    id: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      innerVisible: this.visible,
      loading: false,
      typeArr: [],
      model: {
        complainCauseCode: '',
        complainMemo: '',
        complainPicture: []
      }
    }
  },
  watch: {
    visible(val, oldVal) {
      if (val === oldVal) {
        return
      }
      this.resetForm()
      this.innerVisible = val
    },
    innerVisible(val, oldVal) {
      if (val === oldVal) {
        return
      }
      this.$emit('update:visible', val)
    }
  },
  created() {
    getCOMPLAINCAUSE().then(arr => {
      if (Array.isArray(arr)) {
        this.typeArr = arr
      }
    })
  },
  methods: {
    submit() {
      this.$refs.elForm.validate(valid => {
        if (!valid) {
          return
        }
        let data = copy(this.model, true)
        data.fhbOrderId = this.id
        this.loading = true
        this.$ajax.post('/ms-fahuobao-order/merchantComplain/complain', data).then(response => {
          let success = dotData(response, 'success')
          if (success) {
            confirm('投诉成功', '投诉成功', {type: 'success'}).finally(_ => {
              this.loading = false
              this.innerVisible = false
            })
          }
        }).catch(_ => {
          this.loading = false
        })
      })
    },
    resetForm() {
      const node = this.$refs.elForm
      if (node) {
        node.resetFields()
      }
    }
  }
}
</script>
